<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="/resources/css/formSelects-v4.css"/>
    <script src="/resources/js/function/Local.js"></script>
    <script src="/resources/js/function/Session.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script src="/resources/layui/layui.js"></script>
    <script src="/resources/js/json2.js"></script>

    <script src="http://api.map.baidu.com/api?v=2.0&ak=5idKqlEzjoxnYjGPwkevle5FsucQxXe2"></script>

    <script src="/resources/js/jquery.min.js"></script>
    <script>
        var staffid;
        var staff_data;
        staff_data = JSON.parse(sessionStorage.getItem(new Session().staff_login));
        staffid=staff_data.id;
    </script>
</head>
<body>

</body>
</html>
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-inline">
                    <input type="text" id="username" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <select name="hello" id="roles" xm-select="roles" >
                        <option value="1">未完成</option>
                        <option value="2">已完成</option>
                    </select>
                </div>
            </div>
            <button type="button" class="layui-btn" onclick="states();" lay-submit="" lay-filter="demo1"><i class="layui-icon layui-icon-search"></i> 查询</button>
        </div>
    </form>
    <table class="layui-hide" lay-filter="dingdanTable" id="dingdan"></table>
</body>
</html>
<script>
    var table;
    function states(){
        var roleIds = layui.formSelects.value('roles','val');
        //执行重载
        table.reload('dingdan', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            ,where: {
                orderIdstr : $("#username").val(),
                statestr:roleIds.join(",")
            }
        });
    }
    layui.config({
        base: '/resources/js/'
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use('form',function () {
        var form = layui.form;
    });
    layui.use(['table','form','formSelects','laytpl','layer'], function(){
        table = layui.table;
        var form = layui.form;
        var select = layui.formSelects;
        var laytpl=layui.laytpl;
        var str = $("#toolbarDemo").html();

        table.render({
            elem: '#dingdan'
            ,url:new Local().base_url+'/staff/dingdan'+'?staffId='+staffid
            ,page: true
            ,even : true
            ,id : "dingdan"
            ,toolbar:"#toolbarDemo"
            ,cols: [[
                {field:'id',type:'checkbox'}
                ,{field:'id', title: 'ID', sort: true}
                ,{field:'orderId',title:'订单编号',templet:function(d){
                    return d.worksheet.orderId;
                 },sort: true}
                ,{field:'libraryId',title:'用户名',templet:function(d){
                    return d.worksheet.user.name;
                 },sort:true}
                 ,{field:'product',title:'货品名称',templet:function(d){
                     return d.worksheet.product;
                 }}
                 ,{field:'money',title:'总需费用',templet:function(d){
                     return d.worksheet.money;
                  }}
                ,{field:'state',title:'状态',templet:function(d){
                    var stat=d.state;
                    if(stat==1||stat==null){
                        return "未完成";
                    }else if(stat==2){
                        return "已完成";
                    }
                },sort:true}
                ,{field:'beizhu',title:'备注',templet:function(d){
                    return d.worksheet.beizhu;
                 }}
                ,{field:'initDate',title:'开始时间'}
                //,{field:'signDate',title:'结束时间'}
                ,{title:'操作',toolbar: '#barDemo'}
            ]]
        });
        //监听行内的工具条
        table.on('tool(dingdanTable)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            switch(layEvent){
                case "del":
                    layer.confirm('真的删除行么', function(index){
                        layer.close(index);

                        layer.msg("删除成功!");
                    });
                    break;
                case "edit":
                    $.get('shouhuo.html',function (s) {
                        layer.parent.open({
                            type : 1,
                            title : '修改',
                            area:'800px',
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                $("#wid").val(data.worksheet.id);
                                $("#tid").val(data.id);
                                $("#money").val(data.worksheet.money);
                                $("#moneyqr").prop("checked",data.worksheet.payment==1);
                                $("#stateqr").prop("checked",data.state==2);
                                form.render();
                            }
                            ,yes:function(){
                                var str = $("#form").serialize();
                                $.post(new Local().base_url+"/staff/wancheng",str,function(data){
                                    layer.close(layer.index);
                                    table.reload('dingdan');
                                    layer.msg("任务已完成!");
                                });
                            }
                        });
                    });
                    break;
                case "zan":
                    $.post(new Local().base_url+"/staff/wancheng",{tid:data.id,state:2},function(data){
                        layer.close(layer.index);
                        table.reload('dingdan');
                        layer.msg("任务已完成!");
                    });
                    break;
                case "map":
                    $.get('staffmap.html',function (s) {
                        layer.open({
                            type : 1,
                            title : '查看路程',
                            area:['60%','500px'],
                            content:s,
                            btn : ['确定','关闭'],
                            success:function(){
                                var wid=data.worksheet.id;
                                var tid=data.id;
                                $.get(new Local().base_url+"/staff/map",{tid:tid,wid:wid},function(d){
                                    $("#kaishi").val(d.data.kaishi);
                                    $("#jieshu").val(d.data.jieshu);
                                });
                            }
                            ,yes:function(d){
                                console.log(d);
                                parent.layer.closeAll('page');
                                layer.msg("已开始任务!");
                            }
                        });
                    });
                    break;
            }
        });
        table.on('toolbar(dingdanTable)', function(obj) {
            switch (obj.event) {
                case 'batchDelete': //批量删除
                    layer.msg("删除");
                    break;
                case 'add':
                    layer.msg("添加");
                    break;
            };
        });
    });

</script>


<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.available}}" title="启用" lay-filter="roleTable" {{ d.available == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="zan"><i class="layui-icon layui-icon-praise"></i></a>
    <a lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <!--<a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>-->
    <a lay-event="map"><i class="layui-icon layui-icon-location"></i></a>
    <a lay-event="list"><i class="layui-icon layui-icon-list"></i></a>
</script>